<template>
  <div class="box">
    <header>
      <van-nav-bar left-arrow  @click-left="$router.go(-1)">
        <div slot='title'>
          <van-search v-model="value" disabled placeholder="请输入搜索关键词"  @click="$router.push('/search')"/>
        </div>
        <div slot='right'>
          <van-icon size='28' name="like-o" />
        </div>
      </van-nav-bar>
    </header>
    <div class="content" id="content" style='width:100%; flex:1; overflow:auto'>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-dropdown-menu>
          <van-dropdown-item @change="change1" v-model="value1" :options="option1" />
          <van-dropdown-item @change="change2" v-model="value2" :options="option2" />
          <van-dropdown-item @change="change3" v-model="value3" :options="option3" />
        </van-dropdown-menu>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <Prolist :prolist='prolist'></Prolist>
        </van-list>
      </van-pull-refresh>
      <div class="cart" @click="$router.push('/cart')">
        <van-icon name="shopping-cart-o" size="30" color="#fff"/>
      </div>
      <div class="uptop" @click="uptop" v-if='flag'>
        <van-icon name="arrow-up" size="30" color="#fff"/>
      </div>
    </div>
  </div>
</template>

<script>
import Prolist from '@/components/prolist'
import { getprolist } from '@/api'
import Vue from 'vue'
import { NavBar, Search, Icon, DropdownMenu, DropdownItem, List, PullRefresh } from 'vant'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Icon)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(List)
Vue.use(PullRefresh)

export default {
  components: {
    Prolist
  },
  data () {
    return {
      value: '',
      prolist: [],
      oldlist: [],
      value1: 0,
      value2: 'a',
      value3: 0,
      count: 1, // 默认是0页，所以请求就从第一页开始
      finished: false,
      loading: false,
      isLoading: false,
      flag: false,
      option1: [
        { text: '价格', value: 0 },
        { text: '最低价', value: 1 },
        { text: '最高价', value: 2 }
      ],
      option2: [
        { text: '销量', value: 'a' },
        { text: '销量最高', value: 'b' },
        { text: '销量最低', value: 'c' }
      ],
      option3: [
        { text: '評分', value: 0 },
        { text: '評分最高', value: 1 },
        { text: '評分最低', value: 2 }
      ]
    }
  },
  mounted () {
    getprolist().then(res => {
      console.log(res.data.data)
      this.prolist = res.data.data
      this.oldlist = JSON.stringify(res.data.data)
      document.getElementById('content').addEventListener('scroll', this.handleScroll, false)
    })
  },
  methods: {
    // 上啦加载
    onLoad () {
      this.loading = true // 开始加载
      // 请求数据
      getprolist({ limit: 10, count: this.count }).then(res => {
        this.loading = false // 加载结束
        if (res.data.len === 0) { // res.data的对象里有len的一个key
          this.finished = true // 加载完毕
        } else {
          this.prolist = [...this.prolist, ...res.data.data] // 拼接刷新的数据进去重新渲染页面
          this.count += 1 // 使请求的页码加一
        }
      })
    },
    // 下拉刷新
    onRefresh () {
      this.isLoading = true // 开始下拉刷新
      // 请求数据
      getprolist().then(res => {
        this.isLoading = false // 刷新结束
        this.prolist = res.data.data
        this.count = 1 // 冲设置count
        this.finished = false // 重置finished的值
      })
    },
    // 滚动事件
    handleScroll () {
      const scrollTop = document.getElementById('content').scrollTop
      if (scrollTop > 500) { // 滚动超过200顶部按钮出现，否则消失
        this.flag = true
      } else {
        this.flag = false
      }
    },
    // 回到顶部
    uptop () {
      // 要实现底部箭头随滚动出现需要监听滚动的事件
      document.getElementById('content').scrollTop = 0
    },
    // 價格排序
    change1 (value) {
      // console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
      }
      if (value === 1) {
        this.prolist = this.prolist.sort((a, b) => {
          return a.price - b.price
        })
      }
      if (value === 2) {
        this.prolist = this.prolist.sort((a, b) => {
          return b.price - a.price
        })
      }
    },
    // 銷量排序
    change2 (value) {
      console.log(value)
      if (value === 'a') {
        this.prolist = JSON.parse(this.oldlist)
      }
      if (value === 'b') {
        this.prolist = this.prolist.sort((a, b) => {
          return b.sales - a.sales
        })
      }
      if (value === 'c') {
        this.prolist = this.prolist.sort((a, b) => {
          return a.sales - b.sales
        })
      }
    },
    // 評分排序
    change3 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
      }
      if (value === 1) {
        this.prolist = this.prolist.sort((a, b) => {
          return b.rating - a.rating
        })
      }
      if (value === 2) {
        this.prolist = this.prolist.sort((a, b) => {
          return a.rating - b.rating
        })
      }
    }
  }
}
</script>

<style lang="scss">
.uptop {
  width: 45px;
  position: fixed;
  z-index: 5;
  height: 45px;
  bottom: 48px;
  right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(25,29,38,.95);
}
.cart {
  width: 45px;
  position: fixed;
  z-index: 5;
  height: 45px;
  bottom: 48px;
  left: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(25,29,38,.95);
}
</style>
